<template>
    <div class="tech-card">
        <div class="card-title">{{title}}</div>
        <div class="card-content">
            <slot></slot>
        </div>
        <div class="card-footer" @click="moreAction">{{footerText}}</div>
    </div>
</template>

<script>
export default {
    name: 'TechCard',
    props: {
        title: {
            type: String,
            default: 'Card Title',
        },
        footerText: {
            type: String,
            default: '更多',
        },
    },
    methods: {
        moreAction() {
            this.$emit('more');
        },
    },
};
</script>

<style lang="less" scoped>
.tech-card {
    box-shadow:0px 0px 12px 0px rgba(0,0,0,0.06);
    border-radius: @border-radius;
    .m(@gap-md);
    .card-title,
    .card-footer {
        height: 40px;
        font-size: @font-size;
        color: @gray-darker;
        line-height: 40px;
    }
    .card-title {
        .p-h(@gap-md);
        .border-line();
    }
    .card-footer {
        text-align: center;
        font-size: @font-size-sm;
        color: @gray-dark;
        .border-line-top();
    }
}
</style>
